<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-02-25 10:18:09
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-03-23 09:59:52
 -->
<template>
  <div class="kid-msg">
    <cvue-dialog :dialogVisible="dialogVisible"
      :dialogLoading="dialogLoading"
      :isShowFoot = false
      :title="'用户账号-' + info.phone"
      dialogWidth="500px"
      @handleOpen="getDetail"
      @closeDialog="closeDialog"
      @confirmDialog="confirmDialog"
      @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <el-form :model="ruleForm" ref="ruleForm" label-width="70px" class="demo-ruleForm">
          <el-row :gutter="20">
            <!-- <el-col :span="24">
              <el-form-item label="孩子手机号" prop="phone">
                <el-input v-model.trim="ruleForm.phone" placeholder="请输入手机号" maxlength="11" disabled></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname" placeholder="孩子昵称" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="性别" prop="sex">
                <el-input v-model="ruleForm.sex" placeholder="孩子性别" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="出生日期" prop="birthday">
                <el-input v-model="ruleForm.birthday" placeholder="孩子生日" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属地区" prop="area">
                <el-input v-model="ruleForm.region" placeholder="所属地区" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </cvue-dialog>
  </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
export default {
  name: 'kid-msg',
  components: {
    cvueDialog,
    cvueTable
  },
  data () {
    return {
      dialogLoading: false,
      ruleForm: {
        phone: '',
        nickname: '',
        sex: '',
        birthday: '',
        region: ''
      },
      controlledId: ''
    }
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted () {

  },
  methods: {
    getDetail () {
      console.log('kidMsg', this.info)
      let ruleForm = {}
      ruleForm = this.info
      if (!this.info.nickname) ruleForm.nickname = '-'
      if (!this.info.sex) ruleForm.sex = '-'
      if (!this.info.birthday) ruleForm.birthday = '-'
      if (!this.info.region) ruleForm.region = '-'
      this.ruleForm = ruleForm
    },
    closeDialog () {
      this.$emit('closeDialog')
    },
    handleClose () {
      this.$emit('handleClose')
    },
    confirmDialog () {
      this.$emit('confirmDialog')
    }
  }
}
</script>

<style lang="scss">
  .kid-msg {

  }
</style>
